<!DOCTYPE html>
<html>
<meta charset="utf-8"> 
<head>
	<title data-localize="print.title">印刷机</title>
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
body{
	margin: 0;
	padding: 0;
}
.u-line{
	margin: 0 auto;
	width: 1170px;
    height: 720px;
    overflow: hidden;
}
.u-road{
	position: relative;
	height: 200px;
	width: 1250px;
	float: right;
	margin-top: 110px;
	-webkit-transform: rotateY(180deg);
}
.u-road p{
	-webkit-transform: rotateY(180deg);
}
.u-road span{
	display: inline-block;
	-webkit-transform: rotateY(180deg);
}
.u-roadcon{
	position: relative;
	float: left;
}
.u-roadcon:after{
	content: '';
	display: block;
	clear: both;
}
.u-road:after{
	content: '';
	display: block;
	clear: both;
}
.u-road-opposite:after{
	content: '';
	display: block;
	clear: both;
}
.u-machine{
	position: relative;
	float: left;
	margin: 0 35px 0 45px;
	width: 198px;
	height: 198px;
	border-radius: 50%;
	background: #bdcee2;
	border: 1px solid #1d83bc;
	z-index: 11;
}
.u-machine .u-boxcon{
	position: absolute;
	background: #bdcee2;
	margin: 0;
}
.u-machine .u-boxcon:nth-child(1){
	right: -36px;
	top: 64px;
}
.u-machine .u-boxcon:nth-child(2){
	left: 64px;
	top: -36px;
}
.u-machine .u-boxcon:nth-child(3){
	left: -36px;
	top: 64px;
}
.u-machine .u-boxcon:nth-child(4){
	left: 64px;
	bottom: -36px;
}
.u-track{
	position: absolute;
	height: 28px;
	width: 100%;
	left: 0;
	top: 85px;
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
}
.u-boxcon {
	position: relative;
	float: left;
	width: 68px;
	height: 68px;
	margin: 65px 0 65px 10px;
	background: #bdcee2;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 10;
}
.right{
	z-index: 12;
}
.u-boxcon1 {
	position: absolute;
	top: 65px;
	left:10px;
	width: 68px;
	height: 68px;
	background: #29abe2;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 10;
	display: none;
}
.u-boxcon2 {
	position: absolute;
	left: 64px;
	top: -36px;
	width: 68px;
	height: 68px;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 11;
	background: url('image/print2.png') no-repeat 0 0;
	background-size: 100% 100%;
	display: none;
}
.u-box {
    position: absolute;
	left: 0px;
	top: 0px;
	background: #bdcee2;
    width: 68px;
    height: 68px;
    border-radius: 4px;
    z-index: 10;
}
.u-boxcon p{
	margin: 0;
	padding: 0;
	position: absolute;
	top: -20px;
	line-height: 20px;
	font-size: 14px;
	color: #484848;
	width: 69px;
	text-align: center;
}
.u-scan{
	position: absolute;
    width: 130px;
    left: 318px;
    bottom: -86px;
    z-index: 11;
}
.u-scan-b{
	left: 718px;
}
.u-scan img{
	position: relative;
	z-index: 2;
}
.u-scan .u-scanline{
	position: absolute;
	bottom: 20px;
	left: 5%;
	width: 90%;
	height: 5px;
	background: #484848;
	opacity: 0.8;
	z-index: 1;
}
.u-adjust2{
	position: absolute;
	left: 10px;
	width: 71px;
	height: 20px;
}
.u-adjust1{
	position: absolute;
	left: 490px;
	width: 71px;
	height: 20px;
}
.lineB .u-adjust2{
	left: -430px;
}
.lineB .u-adjust1{
	left: 10px;
}
.break{
	background: url('image/break.png') no-repeat 0 0;
	background-size: 100% 100%;
}
.u-btns{
	margin: 20px 0 0 60%;
}
/*animations*/
.scan{
	-webkit-transform: translateZ(0);
	-webkit-animation: scan 0.6s ease infinite;
}
@-webkit-keyframes scan {
0%{
	-webkit-transform: translateY(0);
}
50%{
	-webkit-transform: translateY(-120px);
}
100%{
	-webkit-transform: translateY(0);
}
}
.scan1{
	-webkit-transform: translateZ(0);
	-webkit-animation: scan 0.6s ease infinite;
}
@-webkit-keyframes scan {
0%{
	-webkit-transform: translateY(-120px);
}
50%{
	-webkit-transform: translateY(0);
}
100%{
	-webkit-transform: translateY(-120px);
}
}
.moveleft{
	-webkit-animation: moveleft 0.3s linear infinite;
	-webkit-backface-visibility: hidden;
	animation-fill-mode : backwards;
}
.rotate{
	-webkit-animation: action 0.3s linear infinite;
	-webkit-backface-visibility: hidden;
	animation-fill-mode : backwards;
}
.rotatee{
	-webkit-animation: actione 0.3s linear infinite;
	-webkit-backface-visibility: hidden;
	animation-fill-mode : backwards;
}
@-webkit-keyframes action {
0%{
	-webkit-transform: rotate(0deg);
}
100%{
	-webkit-transform: rotate(90deg);
}
}
@-webkit-keyframes actione {
0%{
	-webkit-transform: rotate(0deg);
}
100%{
	-webkit-transform: rotate(-90deg);
}
}


@-webkit-keyframes moveleft {
0%{
	-webkit-transform: translateX(0);
}
100%{
	-webkit-transform: translateX(-80px);
}
}

.stop {
    animation-play-state: paused;
}
.opposite{
	margin-top: 100px;
	-webkit-transform: rotateX(180deg) rotateY(180deg);
}
.opposite span{
	display: inline-block;
	-webkit-transform: rotateX(180deg) rotateY(180deg);
}
.opposite p,.opposite h1{
	-webkit-transform: rotateX(180deg) rotateY(180deg);
}
.recieveboxA{
	position: absolute;
	margin: 0;
	left: 250px;
	top: 65px;
	z-index: 13;
}
.recieveboxB{
	position: absolute;
	margin: 0;
	left: 650px;
	top: 65px;
	z-index: 13;
}
.u-charge{
	position: absolute;
	width: 68px;
	height: 68px;
	background: #bdcee2;
	border-radius: 4px;
	border: 1px solid #29abe2;
	z-index: 9;
	font-size: 12px;
	text-align: center;
}
.u-charge span{
	display: inline-block;
	line-height: 20px;
	margin-top: 25px;
	font-size: 12px;
}
.u-charge p{
	position: absolute;
	left: 0;
	width: 100%;
	top: -20px;
	line-height: 20px;
	font-size: 14px;
	margin: 0;
}
.u-charge1{
	bottom: -35px;
	right:90px;
}
.u-charge2{
	top: -35px;
	left:10px;
}
.u-charge3{
	bottom: -35px;
	left:10px;
}
#u-boxe{
	position: absolute;
	opacity: 0;
}
.u-infos{
	height: 840px;
}
</style>

</head>
<body>
<div class='u-head'>
   <div class="u-headcon">
	<a href="index.html"><div class="u-mainpage" data-localize="back">回到首页</div></a>
	<h3 data-localize="print.title">印刷机</h3>
	<div class="changeLang">
		<p class="u-lang"><span>中文</span><span>English</span></p>
	    <div isopen="true" class="changeLangBtn"></div>
	</div>
</div>
</div>
<div class="u-infos">
	<h2 data-localize="print.info_title">状态区域</h2>
	<div class="u-errorlist">
		<h3 data-localize="yichang">异常一览：</h3>
		<div class="u-errorlistcon">
		</div>
	</div>
	<p class="status"><span data-localize="print.running">运行状态：</span><span class="u-cube t-status"></span></p>
	<br>
	<p><span data-localize="print.info_status1">印刷压力：</span><span class="p5"></span></p>
	<p><span data-localize="print.info_status2">印刷速度：</span><span class="p6"></span></p>
	<p><span data-localize="print.info_status3">印刷高度-A工位：</span><span class="p7"></span></p>
	<p><span data-localize="print.info_status3">印刷高度-B工位：</span><span class="p8"></span></p>
	<p><span data-localize="print.info_status3">印刷高度-C工位：</span><span class="p9"></span></p>
	<p><span data-localize="print.info_status3">印刷高度-D工位：</span><span class="p10"></span></p>
	<p><span data-localize="print.info_status4">丝网间距：</span><span class="p11"></span></p>
	<p><span data-localize="print.info_status5">刮刀高度-上：</span><span class="p12"></span></p>
	<p><span data-localize="print.info_status5">刮刀高度-下：</span><span class="p13"></span></p>
	<p><span data-localize="print.info_status6">墨刀高度-上：</span><span class="p14"></span></p>
	<p><span data-localize="print.info_status6">墨刀高度-下：</span><span class="p15"></span></p>
	<p><span data-localize="print.info_status7">印刷量程：</span><span class="p17"></span></p>
	<br>
	<p><span data-localize="print.info_status8">印刷环境湿度：</span><span class="p18"></span></p>			
	<p><span data-localize="print.info_status9">印刷电池片温度：</span><span class="p19"></span></p>			
	<p><span data-localize="print.info_status10">检测印刷台上电池表面温度：</span><span class="p20"></span></p>
	<br>			
	<p><span data-localize="print.info_status11">最近湿重：</span><span class="p21"></span></p>
	<p><span data-localize="print.info_status12">最近线宽：</span><span class="p22"></span></p>
</div>
<div class="t-con">
<div class="u-line">
	<div class="u-boxcon needleft stop u-boxconspe" id="u-boxe"><div class="u-box u-boxe"></div></div>
	<div class="u-road lineB">
		<div class="u-track"></div>
		<div class="u-roadcon left">
			<div class="u-boxcon needleft"><div class="u-box u-box14" id="u-box14"><p class="u-box-p14"></p></div><div class="u-handbar u-handbar2" id="u-handbar2"><div class="u-hand"></div></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box13"><p class="u-box-p13"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box12"><p class="u-box-p12"></p></div></div>
			<div class="u-boxcon needleft boxcon11 recieveboxA"><div class="u-box u-box11"><p class="u-box-p11"></p></div></div>
		</div>
		<div class="u-machine" id="u-machine">
			<div class="u-boxcon needrotatee"><div class="u-box u-box9"><p class="u-box-p9"></p></div></div>
			<div class="u-boxcon needrotatee"></div>
			<div class="u-boxcon needrotatee"></div>
			<div class="u-boxcon needrotatee" id="rotatea"><div class="u-box u-box10 u-box-change"><p class="u-box-p10"></p></div></div>
		</div>
		<div class="u-roadcon right">
			<div class="u-adjust1 u-adjusttop"><img src="image/adjust.png" width="100%"></div>
			<div class="u-adjust1 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>
			<div class="u-adjust2 u-adjusttop"><img src="image/adjust.png" width="100%"></div>
			<div class="u-adjust2 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>
			<div class="u-boxcon needleft"><div class="u-box u-box8"><p class="u-box-p8"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box7"><p class="u-box-p7"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box6"><p class="u-box-p6"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box5"><p class="u-box-p5"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box4"><p class="u-box-p4"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box3"><p class="u-box-p3"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box2"><p class="u-box-p2"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box1" id="u-box1"><p class="u-box-p1"></p></div><div class="u-handbar u-handbar1" id="u-handbar1"><div class="u-hand"></div></div></div>
			<div class="u-boxcon needleft"><div class="u-box" style="background: #ddd9c3"></div></div>
		</div>
		<div class="u-scan">
			<img src="image/scan.png" width="100%">
			<div class="u-scanline" id="u-scanline"></div>
		</div>
		<div class="u-charge u-charge1"><p class="w1"></p><span class="u-weight1"></span><span data-localize="print.weight">重量：</span></div>
		<div class="u-charge u-charge2"><p class="w2"></p></div>
		<div class="u-charge u-charge3"><p class="w3"></p><span class="u-weight2"></span><span data-localize="print.weight">重量：</span></div>
	</div>	
	<div class="u-road opposite lineA">
		<div class="u-track"></div>
		<div class="u-roadcon left">
			<div class="u-boxcon needleft"><div class="u-box u-box14" id="u-box14-b"><p class="u-box-p14"></p></div><div class="u-handbar u-handbar2" id="u-handbar2-b"><div class="u-hand"></div></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box13"><p class="u-box-p13"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box12"><p class="u-box-p12"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box11"><p class="u-box-p11"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box10"><p class="u-box-p10"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box9"><p class="u-box-p9"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box8"><p class="u-box-p8"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box7"><p class="u-box-p7"></p></div></div>
			<div class="u-boxcon needleft recieveboxB"><div class="u-box u-box6"><p class="u-box-p6"></p></div></div>
		</div>
		<div class="u-machine" id="u-machine">
			<div class="u-boxcon needrotatee"><div class="u-box u-box4"><p class="u-box-p4"></p></div></div>
			<div class="u-boxcon needrotatee"></div>
			<div class="u-boxcon needrotatee"></div>
			<div class="u-boxcon needrotatee" id="rotatea-b"><div class="u-box u-box5 u-box-change"><p class="u-box-p5"></p></div></div>
		</div>
		<div class="u-roadcon right">
			<div class="u-adjust1 u-adjusttop"><img src="image/adjust.png" width="100%"></div>
			<div class="u-adjust1 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>
			<div class="u-adjust2 u-adjusttop"><img src="image/adjust.png" width="100%"></div>
			<div class="u-adjust2 u-adjustbottom"><img src="image/adjust.png" width="100%"></div>
			<div class="u-boxcon needleft"><div class="u-box u-box3"><p class="u-box-p3"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box2"><p class="u-box-p2"></p></div></div>
			<div class="u-boxcon needleft"><div class="u-box u-box1" id="u-box1-b"><p class="u-box-p1"></p></div><div class="u-handbar u-handbar1" id="u-handbar1-b"><div class="u-hand"></div></div></div>
			<div class="u-boxcon needleft"><div class="u-box" style="background: #ddd9c3"></div></div>
		</div>
		<div class="u-scan u-scan-b">
			<img src="image/scan.png" width="100%">
			<div class="u-scanline" id="u-scanline-b"></div>
		</div>
		<div class="u-charge u-charge1"><p class="w1"></p><span class="u-weight1"></span><span data-localize="print.weight">重量：</span></div>
		<div class="u-charge u-charge2"><p class="w2"></p></div>
		<div class="u-charge u-charge3"><p class="w3"></p><span class="u-weight2"></span><span data-localize="print.weight">重量：</span></div>
	</div>	
</div>
</div>

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.localize.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/language_cookie.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var lastData = null,si=null;
var url = getUrl("print");
var request = new GetRequest();
var showval= request.type;
if ('WebSocket' in window) {
    websocket = new WebSocket(url+'/'+request.line+'/'+request.index);
}else {
    alert('Not support websocket')
}
if (request.line == "A") {
	$('.lineB').hide();
	$('.lineA').show();
}else if (request.line == "B") {
	$('.lineA').hide();
	$('.lineB').show();
}
websocket.onerror = function () {
    $('.u-boxcon').addClass('stop');
};

websocket.onopen = function (event) {
    $('.u-boxcon').removeClass('stop');
}
function count(obj, index) {
	var abmax;
	if (request.line == "B") {
		abmax = 11;
	}else if(request.line == "A"){
		abmax = 6;
	}
	for (var i = 0, val; val = obj[i++];) {
		if (val.silicon_id && val.silicon_id != '0') {
			$('.u-box-p' + val.stack_index).html(val.silicon_id);
			if (val.silicon_status == 1) {
				if (val.stack_index >= abmax) {
					if (index == 1) {
						$('.u-box' + val.stack_index).addClass('break1');
					} else if (index == 2) {
						$('.u-box' + val.stack_index).addClass('break1');
					} else if (index == 3) {
						$('.u-box' + val.stack_index).addClass('break');
					} else {
						$('.u-box' + val.stack_index).addClass('break');
					}
				} else {
					if (index == 1) {
						$('.u-box' + val.stack_index).addClass('prewprinted');
					} else if (index == 2) {
						$('.u-box' + val.stack_index).addClass('break1');
					} else if (index == 3) {
						$('.u-box' + val.stack_index).addClass('break');
					} else {
						$('.u-box' + val.stack_index).addClass('break');
					}
				}
			} else if (val.silicon_status == 0) {
				if (val.stack_index >= abmax) {
					if (index == 1) {
						$('.u-box' + val.stack_index).addClass('backprinted');
					} else if (index == 2) {
						$('.u-box' + val.stack_index).addClass('backprinted2');
					} else if (index == 3) {
						$('.u-box' + val.stack_index).addClass('printed1');
					} else {
						$('.u-box' + val.stack_index).addClass('printed');
					}
				} else {
					if (index == 1) {
						$('.u-box' + val.stack_index).addClass('prewprinted');
					} else if (index == 2) {
						$('.u-box' + val.stack_index).addClass('backprinted');
					} else if (index == 3) {
						$('.u-box' + val.stack_index).addClass('normal');
					} else {
						$('.u-box' + val.stack_index).addClass('printed1');
					}
				}
			} else {
				if (val.stack_index >= abmax) {
					if (index == 1) {
						$('.u-box' + val.stack_index).addClass('backprinted');
					} else if (index == 2) {
						$('.u-box' + val.stack_index).addClass('backprinted2');
					} else if (index == 3) {
						$('.u-box' + val.stack_index).addClass('printed1');
					} else {
						$('.u-box' + val.stack_index).addClass('printed');
					}
				} else {
					if (index == 1) {
						$('.u-box' + val.stack_index).addClass('prewprinted');
					} else if (index == 2) {
						$('.u-box' + val.stack_index).addClass('backprinted');
					} else if (index == 3) {
						$('.u-box' + val.stack_index).addClass('normal');
					} else {
						$('.u-box' + val.stack_index).addClass('printed1');
					}
				}
			}
		}
	}
}
function addanimate(obj){
    for (var i = 0; i < obj.length; i++) {
       (function(i){
            if (obj[i].isPause == 0){
            	if (obj[i].stack_index == 10 || obj[i].stack_index == 9) {
            		$('.u-machine').addClass('rotate');
    				$('.needrotatee').addClass('rotatee');
            	}else{
            		//$('.needleft').addClass('moveleft');
                	$('.u-box'+obj[i].stack_index).parent().addClass('moveleft');
            	}
            }
            if (obj[i].stack_index == "14") {
            	switch (obj[i].isCache) 
				{ 
				  case 0:
				  	
				  	break; 
				  case 1:
				  	$('.u-handbar2').addClass('grow');
					$('.u-box14').addClass('moveup');
				  	break; 
				  case 2:
				  	$('.u-handbar2').addClass('drop');
					$('.u-box14').addClass('movedown');
				  	break;
				  default:

				}
            }
            if (obj[i].stack_index == "1") {
            	switch (obj[i].isCache) 
				{ 
				  case 0:
				  	
				  	break; 
				  case 1:
				  	$('.u-handbar1').addClass('drop');
					$('.u-box1').addClass('movedown');
				  	break;
				  default:

				}
            }
       })(i); 
    }
}
websocket.onmessage = function (event) {
	//$('.u-box7').removeClass('backprinted');
	$('#u-boxe').addClass('moveleft');
	//console.log(typeof(event.data));

    si = JSON.parse(event.data.replace(/\bNaN\b/g, "null"));
    console.log(si);
    if (!lastData) {
    	count(si.stack_list,showval);
    }
    changeColor($('.t-status'),si.p2);
	addanimate(si.stack_list);
    //$('.needleft').addClass('moveleft');
    if (si.isPause1 == 0) {
    	$('.u-adjust1.u-adjusttop').addClass('u-adjustup');
    	$('.u-adjust1.u-adjustbottom').addClass('u-adjustdown');
    }else if (si.isPause1 == 1) {
    	$('.u-adjust1.u-adjusttop').removeClass('u-adjustup');
    	$('.u-adjust1.u-adjustbottom').removeClass('u-adjustdown');
    }
    if (si.isPause2 == 0) {
    	$('.u-adjust2.u-adjusttop').addClass('u-adjustup');
    	$('.u-adjust2.u-adjustbottom').addClass('u-adjustdown');
    }else if (si.isPause2 == 1) {
    	$('.u-adjust2.u-adjusttop').removeClass('u-adjustup');
    	$('.u-adjust2.u-adjustbottom').removeClass('u-adjustdown');
    }

	errorRender();
	if (si.silicon_id_w1 && si.silicon_id_w1 != "0") {
		$('.w1').html(si.silicon_id_w1);
	}
	if (si.silicon_id_up1 && si.silicon_id_up1 != "0") {
		$('.w2').html(si.silicon_id_up1);
	}
	if (si.silicon_id_w2 && si.silicon_id_w2 != "0") {
		$('.w3').html(si.silicon_id_w2);
	}
	if (si.w1 && si.w1 != "0") {
		$('.u-weight1').html(si.w1);
	}else{
		$('.u-weight1').html("");
	}
	if (si.w2 && si.w2 != "0") {
		$('.u-weight2').html(si.w2);
	}else{
		$('.u-weight2').html("");
	}
	
	$('.p5').html(si.p5);
	$('.p6').html(si.p6);
	$('.p7').html(si.p7);
	$('.p8').html(si.p8);
	$('.p9').html(si.p9);
	$('.p10').html(si.p10);
	$('.p11').html(si.p11);
	$('.p12').html(si.p12);
	$('.p13').html(si.p13);
	$('.p14').html(si.p14);
	$('.p15').html(si.p15);
	$('.p17').html((si.p17-si.p16).toFixed(1));
	$('.p18').html(si.p18);
	$('.p19').html(si.p19);
	$('.p20').html(si.p20);
	$('.p21').html(si.p21);
	$('.p22').html(si.p22);
    lastData = si;
    //$('.u-boxcon').addClass('moveleft');
    //count(si.stack_list);
}


document.getElementById('u-boxe').addEventListener("webkitAnimationIteration", function(){
	//$('.u-box7').removeClass('backprinted');
	$('.u-boxcon').removeClass('moveleft');
	$('.u-box14').show();
	//console.time('1');
	reset();
	count(si.stack_list,showval);
	//console.timeEnd('1');
}, false); 
document.getElementById('rotatea').addEventListener("webkitAnimationIteration", function(){
	if (showval == 1){
		$('.u-box-change').removeClass('backprinted');
	}else if (showval == 2){
		$('.u-box-change').removeClass('backprinted2');
	}else if (showval == 3){
		$('.u-box-change').removeClass('printed1');
	}else if (showval == 4){
		$('.u-box-change').removeClass('printed');
	}
	$('.needrotatee').removeClass('rotatee');
    $('.u-machine').removeClass('rotate');

    if (si.isPause3 == 0) {
    	if (si.print_mode == 0) {
    		$('.u-scanline').addClass('scan');
    	}else if (si.print_mode == 1) {
    		$('.u-scanline').addClass('scan1');
    	}
    }else if (si.isPause3 == 1) {
    	$('.u-scanline').removeClass('scan');
    	$('.u-scanline').removeClass('scan1');
    }
}, false);
document.getElementById('rotatea-b').addEventListener("webkitAnimationIteration", function(){
	if (showval == 1){
		$('.u-box-change').removeClass('backprinted');
	}else if (showval == 2){
		$('.u-box-change').removeClass('backprinted2');
	}else if (showval == 3){
		$('.u-box-change').removeClass('printed1');
	}else if (showval == 4){
		$('.u-box-change').removeClass('printed');
	}
	$('.needrotatee').removeClass('rotatee');
    $('.u-machine').removeClass('rotate');
    if (si.isPause3 == 0) {
    	if (si.print_mode == 0) {
    		$('.u-scanline').addClass('scan');
    	}else if (si.print_mode == 1) {
    		$('.u-scanline').addClass('scan1');
    	}
    	
    }else if (si.isPause3 == 1) {
    	$('.u-scanline').removeClass('scan');
    	$('.u-scanline').removeClass('scan1');
    }
}, false);
document.getElementById('u-scanline').addEventListener("webkitAnimationIteration", function(){
	$('.u-scanline').removeClass('scan');
    $('.u-scanline').removeClass('scan1');
	if (si.stack_list.length >= 7) {
		if (showval == 1){
			$('.u-box-change').addClass('backprinted');
		}else if (showval == 2){
			$('.u-box-change').addClass('backprinted2');
		}else if (showval == 3){
			$('.u-box-change').addClass('printed1');
		}else if (showval == 4){
			$('.u-box-change').addClass('printed');
		}
	}
	
}, false);
document.getElementById('u-scanline-b').addEventListener("webkitAnimationIteration", function(){
	$('.u-scanline').removeClass('scan');
    $('.u-scanline').removeClass('scan1');
	if (si.stack_list.length >= 7) {
		if (showval == 1){
			$('.u-box-change').addClass('backprinted');
		}else if (showval == 2){
			$('.u-box-change').addClass('backprinted2');
		}else if (showval == 3){
			$('.u-box-change').addClass('printed1');
		}else if (showval == 4){
			$('.u-box-change').addClass('printed');
		}
	}
	
}, false);
document.getElementById('u-handbar1').addEventListener("webkitAnimationIteration", function(){
    $('.u-handbar1').removeClass('grow');
    $('.u-handbar1').removeClass('drop');
}, false); 
document.getElementById('u-handbar2').addEventListener("webkitAnimationIteration", function(){
    $('.u-handbar2').removeClass('grow');
    $('.u-handbar2').removeClass('drop');
}, false);
document.getElementById('u-box1').addEventListener("webkitAnimationIteration", function(){
    $('.u-box1').removeClass('moveup');
    $('.u-box1').removeClass('movedown');
}, false);  
document.getElementById('u-box14').addEventListener("webkitAnimationIteration", function(){
    $('.u-box14').removeClass('moveup');
    $('.u-box14').removeClass('movedown');
}, false);

document.getElementById('u-handbar1-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-handbar1').removeClass('grow');
    $('.u-handbar1').removeClass('drop');
}, false); 
document.getElementById('u-handbar2-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-handbar2').removeClass('grow');
    $('.u-handbar2').removeClass('drop');
}, false);
document.getElementById('u-box1-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-box1').removeClass('moveup');
    $('.u-box1').removeClass('movedown');
}, false);  
document.getElementById('u-box14-b').addEventListener("webkitAnimationIteration", function(){
    $('.u-box14').removeClass('moveup');
    $('.u-box14').removeClass('movedown');
}, false);
window.onbeforeunload = function(){
	websocket.close();
}    
</script>
</body>
</html>